<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!-- 可选：添加一些自定义样式 -->
    <style>
        .container {
            margin-top: 30px;
        }
        .btn {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h2>用户管理</h2>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.email}"></td>
            <td>
                <a th:href="@{/users/edit/{id}(id=${user.id})}" class="btn btn-primary btn-sm">修改</a>
                <a th:href="@{/users/delete/{id}(id=${user.id})}" class="btn btn-danger btn-sm"
                   onclick="return confirm('您确定要删除该用户吗?')">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <h3>添加用户</h3>
    <form th:action="@{/users}" th:object="${newUser}" method="post">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" class="form-control" id="name" th:field="*{name}" required>
        </div>
        <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" class="form-control" id="email" th:field="*{email}" required>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" class="form-control" id="password" th:field="*{password}" required>
        </div>
        <button type="submit" class="btn btn-success">添加用户</button>
    </form>
</div>

<!-- Bootstrap 必需的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>